<template>
  <div class="z-loading">
    <div
      class="z-loading__mask"
      v-show="show"
      :style="{ '--loading-color': color }"
    />
    <slot></slot>
  </div>
</template>
<script lang="ts" setup>
defineProps({
  color: {
    type: String,
    default: "#000",
  },
  show: {
    type: Boolean,
    default: false,
  },
});
</script>
<style>
.z-loading {
  position: relative;
}
.z-loading__mask {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
  pointer-events: none;
  transition: 0.5s;
}
/* 考虑使用方便和演示知识点，没有使用 v-bind 来进行属性绑定！ */
.z-loading__mask::after {
  content: "";
  width: 30px;
  height: 30px;
  border: 2px solid var(--loading-color);
  border-top-color: transparent;
  border-radius: 50%;
  animation: animate-circle infinite 0.75s linear;
}
@keyframes animate-circle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
